<template>
    <xh-pages :tabBar="true">
        <view class="pages-container">
            <view class="rows">
                <view class="col-3" v-for="item in datalist" @tap="openWin({ url: '/pages/poster/details?id=' + item.id })">
                    <view>
                        <image :src="item.icon" mode="scaleToFill" class="icon" />
                    </view>
                    <text class="title">{{ item.title }}</text>
                </view>
            </view>
        </view>
    </xh-pages>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { openWin } from '@/utils/helpers'

const datalist = ref<any>([])

const userinfo = storeToRefs(useUserStore()).userInfo

const initify = () => {
    uni.$u.http.get('Poster/index').then((res: any) => {
        datalist.value = res?.data
    })
}

onLoad(() => {
    initify()
})

onShow(() => {
    uni.$emit('user::update')
})
</script>

<style lang="scss" scoped>
.pages-container {
    background-image: url('@/static/pic_bg_youxi.png');
    background-size: 100% 100%;
    min-height: 100%;
}

.rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px;
    --col-width: calc((100vw - 20px) / 3);

    .col-3 {
        height: var(--col-width);
        grid-column: span 1;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, .5);
        border-radius: 10px;
        drop-filter: blur(10px);

        .title {
            width: 90%;
            box-sizing: border-box;
            font-size: 14px;
            color: var(--theme-color);
            margin-top: 10px;
            text-align: center;
            // 溢出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .icon {
            width: calc(var(--col-width) * 0.6);
            height: calc(var(--col-width) * 0.6);
            border-radius: 10px;
            border: solid 1px #FFFFFF;
        }
    }
}
</style>